<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>自定义子组件的加载</p>
        <p>msg:{{ msg }}</p>
        <my-input :msg="msg" @update:msg="setMsg"></my-input>
        <hr>
        <p>info:{{ info }}</p>
        <!-- 
            语法糖：将程序开发中一段固定的操作代码逻辑进行封装定义，并提供简单的调用规则

            vue的v-bind指令的sync修饰符，其实是子组件自定义事件绑定的语法糖，该修饰符会完成如下操作
                1、将指定的属性名作为新事件的后缀组成 update:属性名 的规则，作为自定义事件进行绑定
                2、并完成回调方法生成，实现通过事件传递的数据作为 该属性绑定的 父组件变量的新值进行赋值操作
         -->
        <my-input :msg.sync="info"></my-input>
    </div>


    <script type="text/x-template" id="my-input">
        <div>
            <input type="text" v-model="tempMsg">
        </div>
    </script>

    <script>
        Vue.component("MyInput", {
            template:"#my-input",
            props:["msg"],
            computed:{
                tempMsg:{
                    get(){
                        return this.msg
                    },
                    set(nv){
                        this.$emit("update:msg",nv)
                    }
                }
            },
            created() {
                console.log(this.$listeners)
            },
        })

        new Vue({
            el:"#app",
            data:{
                msg:"父组件数据msg",
                info:"父组件数据info"
            },
            methods: {
                setMsg(nv){
                    this.msg = nv;
                }
            },
            
        })
    </script>
</body>
</html>